import React, {Component} from 'react';
import moment from 'moment'
import { connect } from 'react-redux'
import { detailHide } from './detail.redux'
import axios from 'axios'


@connect(state => state,{detailHide})
class Details extends Component{
  constructor(props){
    super(props)
    this.state ={
      content:'',
      time:moment().format('YYYY-MM-DD HH:mm:ss')
    }
  }
  componentDidMount(){
    setInterval(()=>{
      let time = moment()
      this.setState({
        time:time.format('YYYY-MM-DD HH:mm:ss')
      })
    },1000)
    axios.get(`api/visualData/queryTopicDetail?id=${this.props.data[this.props.id].id}`)
      .then(d =>{
        this.setState({
          content:d.data.data[0].content
        })
      })
  }
  render(){
    const App =(
      <div className="m-detail">
        <div className="top">
          <div className="time">{this.state.time}</div>
        </div>
        <div className="back" onClick={this.props.detailHide}>返回</div>
        <div className='cont'>
          <div>
            <div className='subtitle'>{this.props.data[this.props.id].title}</div>
            <div className="desc" dangerouslySetInnerHTML={{__html:this.state.content}} ></div>
            </div>
        </div>
      </div>
    )
    return App
  }
}

export default Details